<template>
  <section>
    <Thumbnails :images="receiptPics"
                :checkable="false" />
    <ImageUpload v-if="showUpload"
                 :checkable="false"
                 :limit="36 - receiptPics.length"
                 multiple
                 @input="handleInput" />
    <!-- <el-divider v-if="receiptPics.length || showUpload" /> -->
  </section>
</template>

<script>
import WaybillMixin, { ATTACHMENT_TYPES, STATUS_CODES } from "./waybill.mixin";
import Thumbnails from "@basic/Thumbnails.vue";
import ImageUpload from "@basic/ImageUpload.vue";
export default {
  name: "WaybillReceiptPics",
  components: { Thumbnails, ImageUpload },
  mixins: [WaybillMixin],
  props: {
    value: Object,
    isAll: [Boolean, Number],
    oneBillFlag: [Boolean, String]
  },
  computed: {
    receiptPics () {
      return (this.waybill?.attachments || [])
        .filter((pic) => pic.type === ATTACHMENT_TYPES.RECEIPT_PIC)
        .map((pic) => pic.url);
    },
    waybillType () {
      return this.waybill.waybillType;
    },
    isRootWaybill () {
      return this.waybill.isRootWaybill;
    },
    showUpload () {
      return this.waybill.status === STATUS_CODES.WAIT_RECEIPT && !this.isAll && !this.oneBillFlag;
    }
  },
  methods: {
    handleInput (files) {
      const fileList = files.map(({ name, url }) => {
        return {
          name,
          url,
          type: 1
        };
      });
      this.$emit("files", fileList);
    }
  }
};
</script>
